<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9lessons Javascript Notification Sound</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){  
	$("#chatData").focus(); 
  $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
  $("#trig").on("click",function(){
    var a = $("#chatData").val().trim();
    if(a.length > 0){
	$("#chatData").val('');   
	$("#chatData").focus(); 
     $("<li></li>").html('<img src="small.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
	  $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
      $('#chatAudio')[0].play();
    }
  });
});
</script>
<style type="text/css">
* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox {width:400px; border:1px solid #000;margin:5px;}
#chatBox > h3 { background-color:#6d84b4; padding:3px; color:#fff; }
#chat { max-height:220px; overflow-y:auto; max-width:400px; }
#chat > ul > li { padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto }
#chatMessages{list-style:none}

#chatMessages > li > img { width:35px;float:left }
#chatMessages > li > span { width:300px;float:left;margin-left:5px}
#chatData { padding:5px; margin:5px; border-radius:5px; border:1px solid #999;width:300px }
#trig { padding: 4px;border: solid 1px #333;background-color: #133783;color:#fff;font-weight:bold }
</style>

</head>
<body>
	
	<div style='margin:0 auto;width:800px;'>
		<div style='margin:20px'>
	<h1>Javascript Notification Sound</h1>
	<h3>Turn the volume up and try this demo <a href='http://9lessons.info'>9lessons.info</a></h3>
	</div>

	
    <div id='chatBox' style='margin-top:20px'>
        <h3>9lessons Demo Chat</h3>
        <div id='chat'>
            <ul id='chatMessages'>
                <li>
                	<img src="small.jpg"/>
                    <span>Hello Friends</span>
                </li>
                <li>
                	<img src="small.jpg"/>
                    <span>How are you?</span>
                </li>
            </ul>
        </div>
		<input type="text" id="chatData" placeholder="Message" />
	    <input type="button" value=" Send " id="trig" />
    </div>
   
  
    </div>
  <iframe src="http://demos.9lessons.info/counter.html" frameborder="0" scrolling="no" height="0"></iframe>
</body>
</html>
